<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Pie Chart Labels Example - HTML5 jQuery Chart Plugin by jqChart
    </title>
    <link rel="stylesheet" type="text/css" href="../js/jqChart/css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="../js/jqChart/css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="../js/jqChart/themes/smoothness/jquery-ui-1.10.4.css" />
    <script src="../js/jqChart/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="../js/jqChart/js/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="../js/jqChart/js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="../js/jqChart/js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="../../js/excanvas.js"></script><![endif]-->

    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {
            var bgColorArray=[
                '#418CF0','#FCB441','#E0400A','#056492','#BFBFBF','#1A3B69','#FFE382',
                '#1E90FF','#4169E1','#4B0082','#9400D3','#FFC0CB','#0000FF','#87CEFA',
                '#8FBC8F','#FFFF00','#32CD32','#00FF00','#006400','#808080','#00CED1',
                '#2E8B57','#90EE90','#DC143C'
            ];

            //var bgColorArray=[];
            var dataArray=[['1', 1], ['United Kingdom', 2], ['Germany', 3],['India', 4], ['Russia', 5], ['China', 6]];
            for(var num=1;num<25;num++){
                var randval=Math.round(Math.random() * 100);
                dataArray[num-1]=[num, randval];
               // bgColorArray[num-1]=bgColorArray1[num-1];
            }

            buildPidChart(bgColorArray,dataArray);

            var data=[];
            data[0]={
                type: 'column',title: '管理员',fillStyle: '#418CF0',
                data: [['09',5],
                    ['10',5],
                    ['11',7],
                    ['12',15],
                    ['13',82],
                    ['14',24],
                    ['15',11],
                    ['16',82]]
            };
            data[1]={
                type: 'column', title: '包海涛',fillStyle: '#FCB441',
                data: [['07',10],
                    ['08',12],
                    ['09',4],
                    ['10',22],
                    ['11',15],
                    ['13',24],
                    ['14',5],
                    ['15',12],
                    ['16',1]],
                labels: {
                    font: '14px sans-serif',
                    fillStyle: 'red',
                    stringFormat: '%dK'
                }
            };
            data[2]={
                type: 'column',title: '张潆允',fillStyle: '#E0400A',
                data: [['08',14],
                    ['09',14],
                    ['10',7],
                    ['11>',18],
                    ['13',31],
                    ['14',24],
                    ['15',5],
                    ['16',9]]
                ,
                labels: {
                    font: '14px sans-serif',
                    fillStyle: 'red',
                    stringFormat: '%dK'
                },
                cursor: 'pointer'
            };
            buildCol(data);
        });

        function buildPidChart(bgColorArray,dataArray){
            var background = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 2,
                colorStops: [{ offset: 0, color: '#d2e6c9' },
                    { offset: 1, color: 'white' }]
            };

            $('#jqChart').jqChart({
                title: { text: '24小时理赔进度' },
                legend: { title: '当天' },
                border: { strokeStyle: '#6ba851' },
                background: background,
                animation: { duration: 1 },
                shadows: {
                    enabled: true
                },
                series: [
                    {
                        type: 'pie',
                        fillStyles: bgColorArray,
                        labels: {
                            stringFormat: '%.2f%%',
//                            valueType: 'percentage',
                            font: '15px sans-serif',
                            fillStyle: 'black'
                        },
                        explodedRadius: 10,
                        explodedSlices: [1],
                        data: dataArray,
                        labelsPosition: 'outside', // inside, outside
//                        labelsAlign: 'circle', // circle, column
//                        labelsExtend: 20,
//                        leaderLineWidth: 1,
//                        leaderLineStrokeStyle: 'black'
                    }
                ]
            });
        }

        function buildCol(data){
            $('#jqChart2').jqChart({
                title: { text: '今天理赔案件操作数(件/小时)' },
                legend: { visible: true,
                    allowHideSeries: true,
                    location : 'right',
                    title: {
                        text: 'Legend Title',
                        font: '14px sans-serif',
                        fillStyle: 'red'
                    },
                    border: {
                        lineWidth: 2,
                        strokeStyle: 'green'
                    },
                    font: '12px sans-serif',
                    textFillStyle: '#418CF0',
                    background: '#eeeeee',
                    margin: 10 },
                animation: { duration: 1 },
                shadows: {
                    enabled: true
                },
                series: data,

            });

            $('#exportId').on('click',function(){
                $('#jqChart').jqChart('exportToPdf');
            });
        }

    </script>

</head>
<body>
<div>
    <div id="jqChart" style="width: 600px; height: 500px;">
    </div>
    <button id="exportId" value="daochu">sssssssssssss</button>
    <div id="jqChart2" style="width: 600px; height: 500px;">
</div>
</div>
</body>
</html>
